<template>
    <div class="checkInDailyBox" style="padding: 48rpx;">
        <div class="calendar">
            <view class="checkInDailyTitle">{{ checkInDailyTitle }}</view>
            <div class="title">
                <slot v-if="$slots.title" name="title"></slot>
                <div v-else class="header-wrap">
                    <div class="flex">
                        <div class="title">{{ title }}</div>
                        <div class="month">
                            <template v-if="title">
                                (
                            </template>
                            {{ selectDay.month }}月{{ selectDay.day }}日
                            <template v-if="title">
                                )
                            </template>
                        </div>
                    </div>
                    <div v-if="!(nowDay.year==selectDay.year&&nowDay.month==selectDay.month&&nowDay.day==selectDay.day)"
                        class="today" @click="switchNowDate">
                        回到今日
                    </div>
                </div>
            </div>
            <!-- 切换上周、本周、下周的按钮 -->
            <!-- <div class="week-switcher">
                <button @click="switchWeek(-1)">上周</button>
                <button @click="switchWeek(0)">本周</button>
                <button @click="switchWeek(1)">下周</button>
            </div> -->
            <!-- 日历头部 -->
            <div class="flex-around calendar-week">
                <div class="view mr2">一</div>
                <div class="view mr2">二</div>
                <div class="view mr2">三</div>
                <div class="view mr2">四</div>
                <div class="view mr2">五</div>
                <div class="view mr2">六</div>
                <div class="view">日</div>
            </div>
            <!-- 日历主体 -->
            <swiper class="swiper" :style="'height:' + (swiperHeight) + 'rpx'" @change="swiperChange" :circular="true"
                :current="swiperCurrent" :duration="swiperDuration">
                <!-- <swiper-item v-for="(listItem, listIndex) in calendarData" :key="listIndex">
                    <div class="flex-start flex-wrap calendar-main" :data-length="listItem.length">
                        <div v-for="(item, index) in listItem" :key="index" class="day">
                            <div
                                :class="'bg ' + (item.month === selectDay.month?processSpotMap[item.year+'-'+item.month+'-'+item.day]?processSpotMap[item.year+'-'+item.month+'-'+item.day]:'':'') + '  ' + ((item.year === selectDay.year && item.month === selectDay.month) ? (item.day === selectDay.day && oldCurrent === listIndex ?'select':''): 'other-month') + ''"
                                @tap.capture="selectChange"
                                :data-day="item.day"
                                :data-year="item.year"
                                :data-month="item.month">
                                {{ item.day }}
                                <span v-if="spotMap[item.year + '-' + item.month + '-' + item.day]" class="check-in-status">{{ spotMap[item.year + '-' + item.month + '-' + item.day]? '✔' : '' }}</span>
                            </div>
                        </div>
                    </div>
                </swiper-item> -->
                <swiper-item v-for="(listItem, listIndex) in calendarData" :key="listIndex">
                    <div class="flex-start flex-wrap calendar-main" :data-length="listItem.length">
                        <div v-for="(item, index) in listItem" :key="index" class="day">
                            <div :class="'bg ' + (item.month === selectDay.month ? processSpotMap[item.year+'-'+item.month+'-'+item.day]?processSpotMap[item.year+'-'+item.month+'-'+item.day]:'':'') + '  ' + ((item.year === selectDay.year && item.month === selectDay.month) ? (item.day === selectDay.day && oldCurrent === listIndex ?'select':''): 'other-month') + ''"
                                @tap.capture="selectChange" :data-day="item.day" :data-year="item.year"
                                :data-month="item.month">
                                <div :class="[(item.day === selectDay.day && oldCurrent === listIndex ) ? 'flag' : 'noflag']" ></div>
                                <div class="date">{{ item.day }}</div>
                                <div class="week">{{ getWeekDay(item.year, item.month, item.day) }}</div>
                                <!-- <div class="check-in-status">{{ processSpotMap[item.year+'-'+item.month+'-'+item.day]? '✔' : '-' }}</div> -->
                            </div>
                        </div>
                    </div>
                </swiper-item>
            </swiper>
            <div @click="openChange" class="flex list-open">
                <div class="list-openL"></div>
                <div :class="'icon ' + (open?'fold':'unfold') + ''"></div>
                <div class="list-openR"></div>
            </div>

            <view class="checkInDailyRecordD" :class="checkInStatusClass">
                <span></span>今日签到成功
            </view>
        </div>
    </div>
</template>
<script>

export default {
    /**
         * 组件的初始数据
         */
    data () {
        return {
            selectDay: {
                year: '-',
                month: '-',
                day: '-'
            },
            // 选中时间
            nowDay: {},
            // 现在时间
            open: false,
            swiperCurrent: 1,
            // 选中时间
            oldCurrent: 1,
            // 之前选中时间
            dateList0: [],
            // 0位置的日历数组
            dateList1: [],
            // 1位置的日历数组
            dateList2: [],
            // 2位置的日历数组
            swiperDuration: 500,
            swiperHeight: 0,
            backChange: false, // 跳过change切换
            checkInData: {}, // 存储签到数据，格式为 { '2024-10-01': true, '2024-10-02': false }
            checkInDailyTitle: '本周签到进度',
            checkInDailyFlag:'本周',
            checkInStatusClass: '', // 新增属性，用于存储要应用的样式类名
            checkInStatusText: ''
        }
    },
    computed: {
        processSpotMap (data) {
            console.log(data,'processSpotMap')
            const spotMap = data.spotMap
            const processSpotMap = {}
            console.log(spotMap,'spotMap---')
            if (spotMap.length > 0) {
                for (const iterator of spotMap) {
                    if (iterator.status === 1) {
                        processSpotMap[iterator.date.replace(/\b(0+)/gi, '')] = 'deep-spot'
                    } else {
                        processSpotMap[iterator.date.replace(/\b(0+)/gi, '')] = 'spot'
                    }
                }
            }
             // 未签到或没有 status 的情况
            const currentDate = this.formatOutputDate(this.selectDay);
            if (!processSpotMap[currentDate]) {
                processSpotMap[currentDate] = 'spot';
            }
            return processSpotMap;
        },
        calendarData () {
            return [
                this.dateList0,
                this.dateList1,
                this.dateList2
            ]
        }

    },
    /**
         * 初始化
         */
    create () {
        const spotMap = this.spotMap
        const processSpotMap = {}

        if (spotMap.length > 0) {
            for (const iterator of spotMap) {
                if (iterator.status === 0) {
                    processSpotMap[iterator.date.replace(/\b(0+)/gi, '')] = 'spot'
                } else {
                    processSpotMap[iterator.date.replace(/\b(0+)/gi, '')] = 'deep-spot'
                }
            }
        }

        this.processSpotMap = processSpotMap
    },
    mounted () {
        const now = this.defaultTime ? new Date(this.defaultTime) : new Date()
        const selectDay = {
            year: now.getFullYear(),
            month: now.getMonth() + 1,
            day: now.getDate()
        }
        this.nowDay = {
            year: now.getFullYear(),
            month: now.getMonth() + 1,
            day: now.getDate()
        }
        this.setMonth(selectDay.year, selectDay.month, selectDay.day)
        this.updateList(now, -1, 0)
        this.updateList(now, 0, 1)
        this.updateList(now, 1, 2)
        this.setSwiperHeight(1)
        // 模拟签到数据
        this.checkInData['2024-10-16'] = true;
        this.checkInData['2024-10-17'] = true;
        this.updateCheckInStatus(selectDay);
    },
    /**
         * 组件的属性列表
         */
    props: {
        spotMap: {
            // 标点的日期
            type: Array,
            default () {
                return []
            }
        },
        defaultTime: {
            // 标记的日期，默认为今日 注意：传入格式推荐为'2022/1/2'或'2022/01/02', 其他格式在ios系统上可能出现问题
            type: String,
            default: ''
        },
        title: {
            // 标题
            type: String,
            default: ''
        },
        defaultOpen: {
            // 是否是打开状态
            type: Boolean,
            default: false
        },
        showShrink: {
            // 是否显示收缩展开功能
            type: Boolean,
            default: true
        }
    },

    watch: {
        defaultOpen (value) {
            this.open = value
        }

    },
    /**
         * 组件的方法列表
         */
    methods: {
        switchWeek(offset) {
            const now = new Date(this.selectDay.year, this.selectDay.month - 1, this.selectDay.day);
            now.setDate(now.getDate() + offset * 7);
            this.setMonth(now.getFullYear(), now.getMonth() + 1, now.getDate());
            this.updateList(now, -1, 0);
            this.updateList(now, 0, 1);
            this.updateList(now, 1, 2);
            this.setSwiperHeight(1);
        },
        getWeekDay(year, month, day) {
            const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
            const date = new Date(year, month - 1, day);
            return weekDays[date.getDay()];
        },
        swiperChange (e) {
            this.swiperCurrent = e.detail.current

            // 日历滑动时触发的方法
            if (this.backChange) {
                this.backChange = false
                return
            } // 计算第三个索引

            const rest = 3 - e.detail.current - this.oldCurrent
            const dif = e.detail.current - this.oldCurrent
            console.log(dif,'dif')

            let nowDate
            if (dif > 0) {
                // 右滑
                nowDate = new Date(this.selectDay.year, this.selectDay.month - 1, this.selectDay.day + 7);
            } else if (dif < 0) {
                // 左滑
                nowDate = new Date(this.selectDay.year, this.selectDay.month - 1, this.selectDay.day - 7);
            }
            console.log(nowDate,'nowDate',this.nowDay)
            // 将 this.nowDay 转换为 Date 对象
            const currentDate = new Date(this.nowDay.year, this.nowDay.month - 1, this.nowDay.day);
            // 计算当前周的第一天
            const currentWeekStart = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() - currentDate.getDay() + 1);
            // 计算当前周的最后一天
            const currentWeekEnd = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() - currentDate.getDay() + 7);

            if (nowDate < currentWeekStart) {
                this.checkInDailyTitle = '上周签到进度';
                this.checkInDailyFlag ='上周'
            } else if (nowDate > currentWeekEnd) {
                this.checkInDailyTitle = '下周签到进度'
                this.checkInDailyFlag ='下周'
            } else {
                this.checkInDailyTitle = '本周签到进度'
                this.checkInDailyFlag ='本周'
            }


            let date

            if (dif === -2 || dif > 0 && dif !== 2) {
                // 向右划的情况，日期增加
                if (this.open) {
                    date = new Date(this.selectDay.year, this.selectDay.month)
                    this.setMonth(date.getFullYear(), date.getMonth() + 1, undefined)
                    this.getIndexList({
                        setYear: this.selectDay.year,
                        setMonth: this.selectDay.month,
                        dateIndex: rest
                    })
                    this.$emit('monthChange', this.monthParams(this.selectDay))
                } else {
                    date = new Date(this.selectDay.year, this.selectDay.month - 1, this.selectDay.day + 7)
                    let isMonthChange = false
                    if (date.getMonth() + 1 > this.selectDay.month) {
                        isMonthChange = true
                    }

                    this.setMonth(date.getFullYear(), date.getMonth() + 1, date.getDate())
                    this.getIndexList({
                        setYear: this.selectDay.year,
                        setMonth: this.selectDay.month - 1,
                        setDay: this.selectDay.day + 7,
                        dateIndex: rest
                    })
                    if (isMonthChange) {
                        this.$emit('monthChange', this.monthParams(this.selectDay))
                    }
                }
            } else {
                // 向左划的情况，日期减少
                if (this.open) {
                    date = new Date(this.selectDay.year, this.selectDay.month - 2)
                    this.setMonth(date.getFullYear(), date.getMonth() + 1, undefined)
                    this.getIndexList({
                        setYear: this.selectDay.year,
                        setMonth: this.selectDay.month - 2,
                        dateIndex: rest
                    })
                    this.$emit('monthChange', this.monthParams(this.selectDay))
                } else {
                    date = new Date(this.selectDay.year, this.selectDay.month - 1, this.selectDay.day - 7)
                    let isMonthChange = false
                    if (date.getMonth() + 1 < this.selectDay.month) {
                        isMonthChange = true
                    }

                    this.setMonth(date.getFullYear(), date.getMonth() + 1, date.getDate())
                    this.getIndexList({
                        setYear: this.selectDay.year,
                        setMonth: this.selectDay.month - 1,
                        setDay: this.selectDay.day - 7,
                        dateIndex: rest
                    })
                    if (isMonthChange) {
                        this.$emit('monthChange', this.monthParams(this.selectDay))
                    }
                }
            }
            this.oldCurrent = e.detail.current
            this.setSwiperHeight(e.detail.current)
        },

        setSwiperHeight (index) {
            const currentRow = this[`dateList${index}`].length / 7
            // 根据指定位置数组的大小计算长度

            if (currentRow === 1) {
                this.swiperHeight = 145 + 8
            }
            this.swiperHeight = (currentRow - 1) * 145 + 145 + 40
        },

        // 更新指定的索引和月份的列表
        getIndexList ({
            setYear,
            setMonth,
            setDay = void 0,
            dateIndex
        }) {
            let appointMonth
            if (setDay) {
                appointMonth = new Date(setYear, setMonth, setDay)
            } else {
                appointMonth = new Date(setYear, setMonth)
            }
            const listName = `dateList${dateIndex}`
            this[listName] = this.dateInit({
                setYear: appointMonth.getFullYear(),
                setMonth: appointMonth.getMonth() + 1,
                setDay: appointMonth.getDate(),
                hasBack: true
            })
        },

        // 设置月份
        setMonth (setYear, setMonth, setDay) {
            const day = Math.min(new Date(setYear, setMonth, 0).getDate(), this.selectDay.day)

            if (this.selectDay.year !== setYear || this.selectDay.month !== setMonth) {
                this.selectDay = {
                    year: setYear,
                    month: setMonth,
                    day: setDay || day
                }

                if (!setDay) {
                    this.open = true
                }
                this.$emit('selectDay', this.formatOutputDate())
            } else {
                this.selectDay = {
                    year: setYear,
                    month: setMonth,
                    day: setDay || day
                }
                this.$emit('selectDay', this.formatOutputDate())
            }
        },
        formatOutputDate (date) {
            let selectDay
            if (date) {
                selectDay = date
            } else {
                selectDay = this.selectDay
            }

            return `${selectDay.year}-${selectDay.month.toString().padStart(2, '0')}-${selectDay.day.toString().padStart(2, '0')}`
        },

        // 展开收起
        openChange () {
            this.open = !this.open
            this.$emit('aaa', {
                a: 0
            }) // 更新数据

            const selectDate = new Date(this.selectDay.year, this.selectDay.month - 1, this.selectDay.day)

            if (this.oldCurrent === 0) {
                this.updateList(selectDate, -1, 2)
                this.updateList(selectDate, 0, 0)
                this.updateList(selectDate, 1, 1)
            } else if (this.oldCurrent === 1) {
                this.updateList(selectDate, -1, 0)
                this.updateList(selectDate, 0, 1)
                this.updateList(selectDate, 1, 2)
            } else if (this.oldCurrent === 2) {
                this.updateList(selectDate, -1, 1)
                this.updateList(selectDate, 0, 2)
                this.updateList(selectDate, 1, 0)
            }

            this.setSwiperHeight(this.oldCurrent)
        },

        // 选中并切换今日日期
        switchNowDate () {
            const now = new Date()
            const selectDate = new Date(this.selectDay.year, this.selectDay.month - 1, this.selectDay.day)
            const dateDiff = (selectDate.getFullYear() - now.getFullYear()) * 12 + (selectDate.getMonth() - now.getMonth())
            const diff = dateDiff === 0 ? 0 : dateDiff > 0 ? -1 : 1

            const diffSum = x => (3 + x % 3) % 3

            if (this.oldCurrent === 0) {
                this.updateList(now, -1, diffSum(2 + diff))
                this.updateList(now, 0, diffSum(0 + diff))
                this.updateList(now, 1, diffSum(1 + diff))
            } else if (this.oldCurrent === 1) {
                this.updateList(now, -1, diffSum(0 + diff))
                this.updateList(now, 0, diffSum(1 + diff))
                this.updateList(now, 1, diffSum(2 + diff))
            } else if (this.oldCurrent === 2) {
                this.updateList(now, -1, diffSum(1 + diff))
                this.updateList(now, 0, diffSum(2 + diff))
                this.updateList(now, 1, diffSum(0 + diff))
            }

            this.swiperCurrent = diffSum(this.oldCurrent + diff)
            this.oldCurrent = diffSum(this.oldCurrent + diff)
            this.backChange = dateDiff !== 0
            this.selectDay = {
                year: now.getFullYear(),
                month: now.getMonth() + 1,
                day: now.getDate()
            }
            this.$emit('selectDay', this.formatOutputDate())
            this.$emit('monthChange', this.monthParams(this.selectDay))
            this.setSwiperHeight(this.oldCurrent)
        },

        // 日历主体的渲染方法
        dateInit ({
            setYear,
            setMonth,
            setDay = this.selectDay.day,
            hasBack = false
        } = {
            setYear: this.selectDay.year,
            setMonth: this.selectDay.month,
            setDay: this.selectDay.day,
            hasBack: false
        }) {
            const dateList = [] // 需要遍历的日历数组数据

            const now = new Date(setYear, setMonth - 1) // 当前月份的1号

            const startWeek = now.getDay() // 目标月1号对应的星期

            const resetStartWeek = startWeek === 0 ? 6 : startWeek - 1 // 重新定义星期将星期天替换为6其余-1

            const dayNum = new Date(setYear, setMonth, 0).getDate() // 当前月有多少天

            const forNum = Math.ceil((resetStartWeek + dayNum) / 7) * 7 // 当前月跨越的周数

            const selectDay = setDay || this.selectDay.day
            this.$emit('getDateList', {
                setYear: now.getFullYear(),
                setMonth: now.getMonth() + 1
            })

            if (this.open) {
                // 展开状态，需要渲染完整的月份
                for (let i = 0; i < forNum; i++) {
                    const now2 = new Date(now)
                    now2.setDate(i - resetStartWeek + 1)
                    let obj = {}
                    obj = {
                        day: now2.getDate(),
                        month: now2.getMonth() + 1,
                        year: now2.getFullYear()
                    }
                    dateList[i] = obj
                }
            } else {
                // 非展开状态，只需要渲染当前周
                for (let i = 0; i < 7; i++) {
                    const now2 = new Date(now) // 当前周的7天

                    now2.setDate(Math.ceil((selectDay + (startWeek - 1)) / 7) * 7 - 6 - (startWeek - 1) + i)
                    let obj = {}
                    obj = {
                        day: now2.getDate(),
                        month: now2.getMonth() + 1,
                        year: now2.getFullYear()
                    }
                    dateList[i] = obj
                }
            }
            if (hasBack) {
                return dateList
            }

            this.dateList1 = dateList
        },

        // 一天被点击时
        selectChange (e) {
            const year = e.currentTarget.dataset.year
            const month = e.currentTarget.dataset.month
            const day = e.currentTarget.dataset.day
            const selectDay = {
                year: year,
                month: month,
                day: day
            }

            if (this.open && (this.selectDay.year !== year || this.selectDay.month !== month)) {
                if (year * 12 + month > this.selectDay.year * 12 + this.selectDay.month) {
                    // 下个月
                    if (this.oldCurrent === 2) {
                        this.swiperCurrent = 0
                    } else {
                        this.swiperCurrent = this.oldCurrent + 1
                    }
                } else {
                    // 点击上个月
                    if (this.oldCurrent === 0) {
                        this.swiperCurrent = 2
                    } else {
                        this.swiperCurrent = this.oldCurrent - 1
                    }
                }

                this.selectDay.day = day

                this.$emit('selectDay', this.formatOutputDate())
            } else if (this.selectDay.day !== day) {
                this.selectDay = selectDay
                this.$emit('selectDay', this.formatOutputDate())
            }
            this.updateCheckInStatus(selectDay);
        },
        updateCheckInStatus(selectDay) {
            const dateKey = `${selectDay.year}-${String(selectDay.month).padStart(2, '0')}-${String(selectDay.day).padStart(2, '0')}`;
            const isCheckedIn = this.checkInData[dateKey];

            if (isCheckedIn) {
                this.checkInStatusText = '今日签到成功';
                this.checkInStatusClass = 'checked-in';
            } else {
                this.checkInStatusText = '今日未签到';
                this.checkInStatusClass = 'not-checked-in';
            }
        },
        updateList (date, offset, index) {
            if (this.open) {
                // 打开状态
                const setDate = new Date(date.getFullYear(), date.getMonth() + offset * 1) // 取得当前日期的上个月日期

                this.getIndexList({
                    setYear: setDate.getFullYear(),
                    setMonth: setDate.getMonth(),
                    dateIndex: index
                })
            } else {
                const setDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + offset * 7) // 取得当前日期的七天后的日期

                this.getIndexList({
                    setYear: setDate.getFullYear(),
                    setMonth: setDate.getMonth(),
                    setDay: setDate.getDate(),
                    dateIndex: index
                })
            }
        },
        // 根据月份计算当前月初始和结束日期
        monthParams (e) {
            let monthList = {}
            let dataDate
            let nowDate
            if (e.month < 10) {
                if (e.day < 10) {
                    nowDate = e.year + '-0' + e.month + '-0' + e.day
                } else {
                    nowDate = e.year + '-0' + e.month + '-' + e.day
                }
            } else {
                if (e.day < 10) {
                    nowDate = e.year + '-' + e.month + '-0' + e.day
                } else {
                    nowDate = e.year + '-' + e.month + '-' + e.day
                }
            }
            if (e) {
                dataDate = new Date(nowDate)
            } else {
                dataDate = new Date()
            }
            const myYear = dataDate.getFullYear()
            const myMonth = dataDate.getMonth()
            const firstDay = new Date(myYear, myMonth, 1)
            const lastDay = new Date(myYear, myMonth + 1, 0)

            monthList['startTime'] = `${firstDay.getFullYear()}-${(firstDay.getMonth() + 1).toString().padStart(2, '0')}-${firstDay.getDate().toString().padStart(2, '0')}`
            monthList['endTime'] = `${lastDay.getFullYear()}-${(lastDay.getMonth() + 1).toString().padStart(2, '0')}-${lastDay.getDate().toString().padStart(2, '0')}`
            monthList = Object.assign(monthList, e)
            return monthList
        }

    }

}
</script>
<style lang="scss" scoped>
.checkInDailyBox {
    margin-top: 63rpx;
    width: 100%;
    background: #ffeadd;
    display: flex;
    flex-direction: column;
}

.week-switcher {
    display: flex;
    justify-content: space-around;
    margin-bottom: 16px;
}

.calendar .calendar-main .day {
    margin-bottom: 8px;
    position: relative;
    width: calc(100% / 7);
    color: #666;
    text-align: center;
    height: 145rpx; // 增加高度以容纳纵向排列的内容
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
// 被选中且已签到的时候显示
.calendar .calendar-main .day .select .flag{
    top: 0px;
    position: absolute;
    width:100%;
    color: #FF6203;
    background-color: #FF6203;
    text-align: center;
    height: 6rpx;
}
// 被选中且未签到的时候显示
.calendar .calendar-main .day .select .noflag{
    top: 0px;
    position: absolute;
    width:100%;
    color: #D4D4D4;
    background-color: #D4D4D4;
    text-align: center;
    height: 6rpx;
}
// 日期
.calendar .calendar-main .day .date {
    margin-top: 20rpx;
    font-size: 22rpx;
    line-height: 22rpx;
    font-weight: bold;
}
// 周
.calendar .calendar-main .day .week {
    font-size: 28rpx;
    line-height: 28rpx;
    color: #111;
    margin-top: 20rpx;
}

.calendar .calendar-main .day .check-in-status {
    font-size: 12px;
    color: #111111;
    width: 4px;
    height: 4px;
    // bottom: 4px;
    // margin-top: 16rpx;
}

.icon {
    // background: url("https://web-static-cdn.oss-cn-beijing.aliyuncs.com/centralPlatform/wearable-device-wx/calendarPackUp.png") no-repeat center;
    background-size: 16px;
    width: 24px;
    height: 24px;
    margin: 0 9.5px;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.swiper {
    transition: height 0.3s
}

.header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.today {
    height: 18px;
    background: #fff;
    border-radius: 11px;
    font-size: 12px;
    line-height: 18px;
    color: #ABAEB2;
    text-align: center;
    padding: 0px 4px;
}

.today:active {
    background: #dfdfdf;
    color: #5f6464
}

.direction-column {
    flex-direction: column
}

.flex1 {
    flex: 1
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center
}

.flex-start {
    display: flex;
    // justify-content: flex-start;
    justify-content: space-between;
    align-items: center
}

.flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.flex-around {
    display: flex;
    justify-content: space-around;
    align-items: center
}

.flex-wrap {
    flex-wrap: wrap
}

.align-start {
    align-items: flex-start
}

.align-end {
    align-items: flex-end
}

.align-stretch {
    align-items: stretch
}

.calendar .title {
    line-height: 16px;
    font-size: 16px;
    font-weight: bold;
    color: #1C2525;
    margin-bottom: 16px;
}

.calendar .title .year-month {
    margin-right: 10px
}

.calendar .title .icon {
    padding: 0 8px;
    font-size: 16px;
    color: #999
}

.calendar .title .open {
    background-color: #f6f6f6;
    color: #999;
    font-size: 11px;
    line-height: 18px;
    border-radius: 9px;
    padding: 0 7px
}

.list-open {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}

.list-openR,
.list-openL {
    flex: 1;
    display: block;
    background: #E8E9EB;
    height: 1rpx;
}

.fold {
    transform: rotate(0deg)
}

.unfold {
    transform: rotate(180deg)
}

.calendar .calendar-week {
    display: flex;
    justify-content: space-between;
    line-height: 32px;
    height: 32px;
    // margin-bottom: 8px;
    font-size: 14px;
    color: #757980;
    // width: calc(100% - 12rpx);
}

.calendar .calendar-week .view {
    flex: 1;
    text-align: center;
}

.calendar .calendar-main {
    transition: height 0.3s;
    align-content: flex-start;
    height: 145rpx;
    // background-color: #4CAF50;
}

.calendar .calendar-main .day {
    margin-bottom: 8px;
    position: relative;
    width: calc((100% - 20rpx) / 7);
    color: #666;
    text-align: center;
    height: 145rpx;
    background-color: #FFF3EC;
    // margin-right: 2rpx; 
}

.calendar .calendar-main .day:nth-last-child(-n+7) {
    margin-bottom: 0;
    // margin-right: 0;
}

.calendar .calendar-main .day .bg {
    height: 145rpx;
    font-size: 14px;
    color: #333;
    background-color: #FFF3EC;
}

.calendar .calendar-main .day .select {
    // width: 32px;
    height: 145rpx;
    // border-radius: 50%;
    text-align: center;
    color: #111111;
    background: #ffffff;
    margin: 0 auto;
    width:100%;
    box-shadow: 0 2px 4px 0 #d6d6d6;
}

.calendar .calendar-main .day .spot::after {
    position: absolute;
    content: ' ';
    display: block;
    width: 32rpx;
    height: 22rpx;
    bottom: 14rpx;
    background: url('https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/duigou.png') no-repeat;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 50%;
    left: 0;
    right: 0;
    margin: auto
}

.calendar .calendar-main .day .deep-spot::after {
    position: absolute;
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    bottom: 14rpx;
    background: #F76965;
    border-radius: 50%;
    left: 0;
    right: 0;
    margin: auto
}

.calendar .calendar-main .day .other-month {
    color: #ccc
}

.header-wrap .month {
    font-size: 18px;
    font-weight: bold;
    color: #242629;
    line-height: 18px;
}

.checkInDailyRecordD {
    margin-top: 16rpx;
    background: #ffffff;
    height: 145rpx;
    box-shadow: 0 4px 10px 0 #d6d6d6;
    padding-left: 24rpx;
    display: flex;
    align-items: center;

    span{
        width: 12rpx;
        height: 12rpx;
        background:#D4D4D4;
        border-radius: 50%;
        margin-right: 26rpx;
    }
}
// 定义签到成功的样式类
.checked-in {
    // background-color: #d4edda; // 绿色背景表示签到成功
    color: #155724;
    
    span{
        width: 12rpx;
        height: 12rpx;
        background:#FF6203;
        border-radius: 50%;
        margin-right: 26rpx;
    }
}

// 定义未签到的样式类
.not-checked-in {
    // background-color: #f8d7da; // 红色背景表示未签到
    color: #721c24;
    span{
        width: 12rpx;
        height: 12rpx;
        background:#D4D4D4;
        border-radius: 50%;
        margin-right: 26rpx;
    }
}

.mr2{
    margin-right: 2rpx;
}
</style>
